<template>
	<input v-model="qusitionData.id" class="uni-input" focus placeholder="请填写反馈信息" placeholder-style="color:#aaa"
		style="border: 1px solid transparent;" />
	<view class="uni-list">
		<text>问题类型</text>
		<picker style="border: 1px solid transparent;" @change="bindPickerChange" :value="index" :range="array">
			<view class="uni-input">{{ array[index] }}</view>
		</picker>
	</view>
	<view class="problem">
		<text>问题描述</text>
		<textarea v-model="qusitionData.message" style="height:100rpx;border: 1px solid transparent;" placeholder="请输入您的问题描述"
			placeholder-style="color:#aaa"></textarea>
	</view>
	<view class="uni-list">
		<text>联系邮箱</text>
		<input v-model="qusitionData.mail" style="border: 1px solid transparent;" class="uni-input" focus placeholder="请填写您的邮箱地址"
			placeholder-style="color:#aaa" />
	</view>
	<view class="uni-list">
		<text>手机号码</text>
		<input  v-model="qusitionData.phone" style="border: 1px solid transparent;" class="uni-input" focus placeholder="请填写您的手机号码"
			placeholder-style="color:#aaa" />
	</view>
	<view class="btn" @click="submit">提交</view>
	<uni-popup ref="popup" type="dialog">
		<uni-popup-dialog mode="base" content="反馈成功!感谢您对本院提出的宝贵意见,您可以通过点击确定返回首页" :duration="2000" :before-close="true"
			@close="close" @confirm="confirm"></uni-popup-dialog>
	</uni-popup>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		qusition
	} from "@/api/AppointmentRegisterAPI.js"
	let title = reactive('picker')
	let array = ref(['挂号相关', '缴费相关', '使用问题'])
	let index = ref(0)
	const qusitionData = ref({
		id:'',
		isDelete: 0,
		type:0,
		message: '',
		mail: '',
		phone: ''
	})
	let bindPickerChange = e => {
		index = e.detail.value
	}
	let popup = ref(null)
	let close = () => {
		popup.value.close('success')
	}
	qusition(qusitionData.value).then(({data}) => {
		if (data.msg == 'success') {
			console.log(data)
		}
	}).catch((err) => {
		console.log(err);
	})
	let confirm = value => {
		uni.switchTab({
			url: '/pages/index/index'
		})
		popup.value.close('success')
	}
	let submit = () => {
		popup.value.open('success')
	}
</script>

<style lang="less" scoped="">
	.uni-input {
		margin: 30rpx;
		border-bottom: 1px solid #f2f2f2;
		padding: 6rpx;
	}

	.uni-list {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		margin: 30rpx;
		border-bottom: 1px solid #f2f2f2;
		padding: 6rpx;
	}

	.problem {
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		margin: 30rpx;
		border-bottom: 1px solid #f2f2f2;
		padding: 6rpx;
	}

	.btn {
		width: 690rpx;
		height: 70rpx;
		color: #fff;
		font-size: 36rpx;
		background-color: #006eff;
		line-height: 70rpx;
		text-align: center;
		margin: 60rpx 30rpx;
	}
</style>
